<template>
  <el-dialog
    title="切换品牌"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="500px">
    <el-input
        placeholder="请输入品牌名"
        v-model="name" @change="enableBrands">
        <i slot="suffix" class="el-input__icon el-icon-date" @click="enableBrands"></i>
    </el-input>
    <el-row  :gutter="20" class="list-container">
      <el-col :span="8" v-for="(brand, index) in brandList" :key="brand.id">
        <div class="brand-item" :class="selectedIndex == index ? 'selected' : ''" @click="brandItemClick(index)">
          <el-image class="brand-poster" :src="brand.icon || noimg">

          </el-image>
          <p>{{brand.name}}</p>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {enableBrandsByName} from '@/api/brand';
import noimg from '@/assets/images/noimg.png';

export default {
  data() {
    return {
      visible: false,
      name: '',
      brandList: [],
      noimg,
      selectedIndex: -1
    }
  },
  methods: {
    // 所有启用的品牌名
    async enableBrands() {
      const {data} = await enableBrandsByName(this.name);
      this.brandList = data;
    },
    show() {
      this.enableBrands();
      this.selectedIndex = -1;
      this.visible = true;
    },
    brandItemClick(index) {
      this.selectedIndex = index;
    },
    confirm() {
      if (this.selectedIndex < 0) {
        return this.$message.warning('请选择品牌');
      }
      this.$emit('brandChange', this.brandList[this.selectedIndex]);
      this.visible = false;
    }
  }
} 
</script>

<style lang="scss" scoped>
.list-container{
  height: 330px;
  margin-bottom: 0;
  overflow: auto;

  .brand-item{
    width: 90%;
    margin: 10px auto;
    text-align: center;
    border: 1px solid #d9d9d9;

    &.selected,
    &:hover{
      border-color: #409EFF;
    }
  }
  
  .brand-poster{
    width: 80px;
    height: 80px;
    margin: 20px auto 10px;
  }
}
</style>